<!DOCTYPE html>
<html>
<head>
    <title>Products</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
            border: none;
            box-sizing: border-box;
            outline: none;
        }
        .box{
            width: 100%;
            height: 50px;
        }
        input{
            display: none;
        }
        label{
            width: 100%;
            height: 50px;
            display: inline-block;
            line-height: 50px;
            position: relative;
            text-align: center;
        }
        label:active{
            background: #EEEEEE;
        }
        label:after{
            content: "";
            width: 20px;
            height: 20px;
            border: 1px solid #8D8D8D;
            border-radius: 20px;
            display: inline-block;
            position: absolute;
            top: 15px;
            left: 15px;
        }
        input:checked+label:after{
            background-color: #8D8D8D;
        }

        .line{
            width: 100%;
            height: 1px;
            background: #CCCCCC;
            opacity: 0.3;
        }




        html,body,a,div,i,span{margin: 0;padding: 0;}
        a{text-decoration: none;}
        body{margin: 50px;}
        .select,.selectNext{cursor:pointer;position:relative;width: 100px;height: 45px;border: 1px solid #CCCCCC;border-radius: 6px;line-height: 45px;font-size: 14px;color: #666666;padding-left: 6px;}
        .xl-icon,.xl-iconNext{position: absolute;width: 20px;height: 20px;
            background-image: url("images/xl-icon_03.png");
            background-position: 4px 0px;
            background-repeat: no-repeat;
            right: 0;
            top:14px;
        }
        .select:hover,.selectNext:hover{background-color: #f7f7f7;}
        .sq-icon{background-position: 4px -33px;}
        /*--下拉选择列表样式--*/
        .selectList,.selectListNext{z-index:999;display:none;width: 175px;border: 1px solid #CCCCCC;border-radius: 6px;position: absolute;top:45px;left: -38px;}
        .listA,.listANext{width: 100%;height: 40px;line-height: 40px;font-size: 14px;color: #8D8D8D;text-align: center;display: block;background-color: #FFFFFF;}
        .listA:hover,.listANext:hover{background-color: #f7f7f7;color: #545454;}
        .listA:first-child,.listANext:first-child{border-radius: 6px 6px 0 0;}
        .listA:last-child,.listANext:last-child{border-radius: 0 0 6px 6px;}
        /*-------------------------------------------------------------------------------------------------*/
        .frameTriangle{
            width: 10px;
            height: 10px;
            background-image: url(images/xl-icon_03.png);
            background-position: -1px -35px;
            background-repeat: no-repeat;
            display: block;
            position: absolute;
            top: -10px;
            left: 95px;
            background-color: #fff;
        }
        .dropDown{position: relative;}
        .selectListNext{top:58px;}
    </style>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- start menu -->
    <link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="js/memenu.js"></script>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="layer/layer.js"></script>
    <script src="js/jquery.easydropdown.min.js"></script>
    <script type="text/javascript" src="js/dropDown.js"></script>
    <!-- slide -->
</head>
<body>
<!--header-->
<div class="header">
    <div class="header-top">
        <div class="container">
            <div class="col-sm-4 logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <div class="col-sm-4 header-left" style="width: 400px">
                <div id="userInfo">
                </div>
                <div class="cart box_1">
                    <a href="checkout.html">
                        <h3>
                            <div class="total">
                                <img src="images/cart.png" alt=""/>
                            </div>
                        </h3>
                    </a>
                    <p><a href="javascript:;" class="simpleCart_empty">购物车</a></p>

                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <div class="container">
        <div class="head-top">
            <div class="col-sm-2 number">
                <span><i class="glyphicon glyphicon-phone"></i>085 596 234</span>
            </div>
            <div class="col-sm-8 h_menu4">
                <ul class="memenu skyblue">
                    <li class=" grid"><a  href="index.html">主页</a></li>
                    <li><a  href="products.html">男子</a>
                        <div class="mepanel">
                            <div class="row">
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">所有服饰</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">上衣</a></li>
                                            <li><a style="color: black" href="products.html">短袖体恤</a></li>
                                            <li><a style="color: black" href="products.html">运动卫衣</a></li>
                                            <li><a style="color: black" href="products.html">夹克/外套</a></li>
                                            <li><a style="color: black" href="products.html">棉服/羽绒服</a></li>
                                            <li><a style="color: black" href="products.html">运动下装</a></li>
                                            <li><a style="color: black" href="products.html">泳裤</a></li>
                                            <li><a style="color: black" href="products.html">比赛服 & Chinos</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">所有鞋类</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">跑步</a></li>
                                            <li><a style="color: black" href="products.html">篮球</a></li>
                                            <li><a style="color: black" href="products.html">户外</a></li>
                                            <li><a style="color: black" href="products.html">足球</a></li>
                                            <li><a style="color: black" href="products.html">网球</a></li>
                                            <li><a style="color: black" href="products.html">拖鞋</a></li>
                                            <li><a style="color: black" href="products.html">休闲</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">配附件类</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">包</a></li>
                                            <li><a style="color: black" href="products.html">袜子</a></li>
                                            <li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
                                            <li><a style="color: black" href="products.html">足球/篮球</a></li>
                                            <li><a style="color: black" href="products.html">运动装备</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a  href="products.html">女子</a>
                        <div class="mepanel">
                            <div class="row">
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">所有服饰</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">上衣</a></li>
                                            <li><a style="color: black" href="products.html">短袖体恤</a></li>
                                            <li><a style="color: black" href="products.html">运动卫衣</a></li>
                                            <li><a style="color: black" href="products.html">夹克/外套</a></li>
                                            <li><a style="color: black" href="products.html">短裙/连衣裙</a></li>
                                            <li><a style="color: black" href="products.html">运动下装</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">所有鞋类</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">跑步</a></li>
                                            <li><a style="color: black" href="products.html">户外</a></li>
                                            <li><a style="color: black" href="products.html">足球</a></li>
                                            <li><a style="color: black" href="products.html">网球</a></li>
                                            <li><a style="color: black" href="products.html">拖鞋</a></li>
                                            <li><a style="color: black" href="products.html">休闲</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col1">
                                    <div class="h_nav">
                                        <h4><a style="color: black" href="products.html">配附件类</a></h4>
                                        <ul>
                                            <li><a style="color: black" href="products.html">包</a></li>
                                            <li><a style="color: black" href="products.html">袜子</a></li>
                                            <li><a style="color: black" href="products.html">帽子/手套/围巾</a></li>
                                            <li><a style="color: black" href="products.html">球类</a></li>
                                            <li><a style="color: black" href="products.html">运动装备</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a  href="typo.html">品牌</a></li>
                    <li><a class="color6" href="">联系我们</a></li>
                </ul>
            </div>
            <div class="col-sm-2 search">
                <a class="play-icon popup-with-zoom-anim" href="#small-dialog"><i class="glyphicon glyphicon-search"> </i> </a>
            </div>
            <div class="clearfix"> </div>
            <!---pop-up-box---->
            <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
            <script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
            <!---//pop-up-box---->
            <div id="small-dialog" class="mfp-hide">
                <div class="search-top">
                    <div class="login">
                        <input type="submit" value="">
                        <input type="text" value="Type something..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = '';}">
                    </div>
                    <p>	Shopping</p>
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    $('.popup-with-zoom-anim').magnificPopup({
                        type: 'inline',
                        fixedContentPos: false,
                        fixedBgPos: true,
                        overflowY: 'auto',
                        closeBtnInside: true,
                        preloader: false,
                        midClick: true,
                        removalDelay: 300,
                        mainClass: 'my-mfp-zoom-in'
                    });

                });
            </script>
            <!---->
        </div>
    </div>
</div>
<!--content-->
<div class="body">
    <div class="container">
        <!--商品列表-->
        <div id="product" class="col-md-9">
            <!--第一行数据-->
            <div id="productList1" style="width:825px; height:300px;padding:30px;margin-top:100px;border:1px solid #8D8D8D;">
                <ul style="list-style:none;line-height: 40px;">
                    <li id="userInfo2" style=" font-size: 24px;color:#262626" ></li>
                    <li><hr style="height:1px;border:none;border-top:1px solid #555555;"></li>
                    <li>消费即可获得积分，享受会员权益</li>
                    <li>您当前的会员等级： 新标会员</li>
                    <li>会籍有效期至： 永久</li>
                    <li>当前积分：0</li>
                </ul>
            </div>
            <div class="clearfix"> </div>
            <!--第二行数据-->
            <div id="productList2" style="width:825px; height:300px;padding:30px;margin-top:100px;border:1px solid #8D8D8D;">
                <ul id="orderList" style="list-style:none;line-height: 60px;">
                    <li style=" font-size: 24px;color:#262626" >最近订单</li>
                    <li><hr style="height:1px;border:none;border-top:1px solid #555555;"></li>
                </ul>
            </div>
            <div class="clearfix"> </div>

        </div>
        <div id="attribute" class="col-md-3 product-bottom">
            <div style="width:300px; height:80px;padding:30px;margin-top:100px;border:1px solid #EEEEEE;background: #9d9d9d">
                <h3 style="color: white">个人信息</h3>
            </div>
            <div style="width:300px; height:300px;padding:30px;border:1px solid #8D8D8D">
                <ul style="list-style:none;line-height: 40px;">
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">我的账户首页</a></li>
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">我的个人信息*</a></li>
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="address.html">我的地址簿</a></li>
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">我的会员信息*</a></li>
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">我的订阅*</a></li>
                </ul>
            </div>
            <div style="width:300px; height:80px;padding:30px;border:1px solid #8D8D8D">
                <h3 style="color: #262626">订单信息</h3>
            </div>
            <div style="width:300px; height:140px;padding:30px;border:1px solid #8D8D8D">
                <ul style="list-style:none;line-height: 40px;">
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="orders.html">我的订单</a></li>
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">我的退单*</a></li>
                </ul>
            </div>
            <div style="width:300px; height:80px;padding:30px;margin-top:40px;border:1px solid #EEEEEE;background: #9d9d9d">
                <h3 style="color: white">帮助</h3>
            </div>
            <div style="width:300px; height:300px;padding:30px;border:1px solid #8D8D8D">
                <ul style="list-style:none;line-height: 40px;">
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">关于订单*</a></li>
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">关于支付*</a></li>
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">物流配送*</a></li>
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">退货退款*</a></li>
                    <li style=" font-size: 20px;" ><a style="color:#262626" href="#">会员规则*</a></li>
                </ul>
            </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<!--//content-->
<!--footer-->
<div class="footer">
    <div class="container">
        <div class="footer-top">
            <div class="col-md-4 top-footer1">
                <h2>Newsletter</h2>
                <form>
                    <input type="text" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
                    <input type="submit" value="SUBSCRIBE">
                </form>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="col-md-3 footer-bottom-cate">
                <h6>Categories</h6>
                <ul>
                    <li><a href="#">Curabitur sapien</a></li>
                    <li><a href="#">Dignissim purus</a></li>
                    <li><a href="#">Tempus pretium</a></li>
                    <li><a href="#">Dignissim neque</a></li>
                    <li><a href="#">Ornared id aliquet</a></li>

                </ul>
            </div>
            <div class="col-md-3 footer-bottom-cate">
                <h6>Feature Projects</h6>
                <ul>
                    <li><a href="#">Curabitur sapien</a></li>
                    <li><a href="#">Dignissim purus</a></li>
                    <li><a href="#">Tempus pretium</a></li>
                    <li><a href="#">Dignissim neque</a></li>
                    <li><a href="#">Ornared id aliquet</a></li>

                </ul>
            </div>
            <div class="col-md-3 footer-bottom-cate">
                <h6>Top Brands</h6>
                <ul>
                    <li><a href="#">Curabitur sapien</a></li>
                    <li><a href="#">Dignissim purus</a></li>
                    <li><a href="#">Tempus pretium</a></li>
                    <li><a href="#">Dignissim neque</a></li>
                    <li><a href="#">Ornared id aliquet</a></li>
                    <li><a href="#">Ultrices id du</a></li>
                    <li><a href="#">Commodo sit</a></li>

                </ul>
            </div>
            <div class="col-md-3 footer-bottom-cate cate-bottom">
                <h6>Our Address</h6>
                <ul>
                    <li>Aliquam metus  dui. </li>
                    <li>orci, ornareidquet</li>
                    <li> ut,DUI.</li>
                    <li>nisi, dignissim</li>
                    <li>gravida at.</li>
                    <li class="phone"><P></P>H : 6985792466</li>
                </ul>
            </div>
            <div class="clearfix"> </div>
            <p class="footer-class">Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
        </div>
    </div>
</div>

<!--//footer-->
</body>
</html>

<script>

    //调用检测自己的登录状态
    proveMe();

    //检测自己的登录状态
    function proveMe() {
        $.ajax({
            type:'post',
            url:'/user/proveMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                //登陆成功，则...
                if(data.code==200){
                    var user = data.data.user;
                    var userid = user.userid;
                    var account = user.account;
                    var username = user.username;
                    var email = user.email;

                    //调用显示用户在线信息函数
                    showUser(username);
                    //显示用户详细信息的函数
                    showUserInfo(username, account, email);
                    //拿到用户近期订单信息
                    getOrders(userid);
                }else{
                    window.location.href="index.html";
                }
            }
        });
    }

    //拿到用户近期订单
    function getOrders(userid) {
        $.ajax({
            type:'post',
            url:'/orders/selectOrdersByUser',
            data:'userid='+userid+'&orderNum=2',
            cache:false,
            dataType:'json',
            success:function(data){
                if(data!=null){
                    for(var i=0; i<data.length; i++) {
                        var productid = data[i].productid;
                        var productnum = data[i].productnum;
                        var orderdate = data[i].orderdate;
                        var orderstatus = data[i].orderstatus;

                        //拿到产品id对应的产品参数
                        getProductById(productid, productnum, orderdate, orderstatus);
                    }
                }else {
                    showDefaultOrders();
                }
            }
        });
    }

    //拿到id对应产品
    function getProductById(productid, productnum, orderdate, orderstatus) {
        $.ajax({
            type:'post',
            url:'/product/selectById',
            data:'productId='+productid,
            cache:false,
            dataType:'json',
            success:function(data){
                if(data!=null){
                    var productname = data.productname;
                    var productprice = data.productprice;
                    var imageurl = data.imageurl;
                    //显示订单信息
                    showOrders(imageurl, productname, productprice, productnum, orderdate, orderstatus);
                }
            }
        });
    }

    //注销
    function removeMe() {
        $.ajax({
            type:'post',
            url:'/user/removeMe',
            data:'',
            cache:false,
            dataType:'json',
            success:function(data){
                if(data.status==200){
                    proveMe();
                }
            }
        });
    }

    //显示用户在线信息函数
    function showUser(username) {
        $("#userInfo").empty();
        $("#userInfo").append("<p class='log' style='width:250px;font-weight:400;font-size:20px;float: left;margin-top: 14px'>欢迎您，<a href='userInfo.html' style='color:black;display: inline;margin: 0;'>"+ username +"</a><a style='display: inline;color: #B2B2B2' onclick='removeMe()' href='#'>注销</a></p>");
    }

    //显示用户详细信息的函数
    function showUserInfo(username, account, email) {
        $("#userInfo2").empty();
        $("#userInfo2").append("你好，<a style='color:#262626' href='#'>"+username+"("+ account +")"+"</a>");
    }
    
    //显示订单信息
    function showOrders(imageurl, productName, productprice, productnum, orderdate, orderstatus) {
        var date = formatDate(orderdate);
        $("#orderList").append("<li style=' font-size: 16px;' ><img style='width: 60px;height: 60px; align:absmiddle' src='.."+  imageurl +"'>&nbsp;&nbsp;&nbsp;&nbsp;"+productName+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;单价："+ productprice +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单日期："+ date +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;订单状态："+ orderstatus +"</li>");
    }

    //显示订单信息的缺省值
    function showDefaultOrders() {
        $("#orderList").append("<li style=' font-size: 20px;' >无近期订单</li>");
    }

    //格式化时间的显示
    function formatDate(orderdate) {
        var date = orderdate.split("T");
        var date1 = date[0];
        var date2 = date[1].split(".");
        return date1+" " + date2[0];
    }

</script>